<template>
  <el-dialog
    center
    :visible="dialogVisible "
    width="1200px"
    title="选择合同"
    append-to-body
    :before-close="handleClose"
    @closed="handleClose"
    :close-on-click-modal="false"
  >
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
    >
      <el-form-item
        label="模版名称"
        label-width="120"
      >
        <el-input
          v-model="queryParams.templateName"
          clearable
          style="width: 200px"
          placeholder="请输入模版名称"
        >
        </el-input>
      </el-form-item>
      <el-form-item
        label="适用群体"
        label-width="120"
      >
        <el-select
          v-model="queryParams.applyBusiness"
          style="width: 200px"
          placeholder="请选择适用群体"
        >
          <el-option
            v-for="item in applyBusinessList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="适用业务"
        label-width="120"
      >
        <el-select
          v-model="queryParams.applyGroup"
          style="width: 200px"
          placeholder="请选择适用业务"
        >
          <el-option
            v-for="item in applyGroupList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="适用厂商"
        label-width="120"
      >
        <el-select
          v-model="queryParams.applyFirm"
          style="width: 200px"
          placeholder="请选择适用厂商"
        >
          <el-option
            v-for="item in applyFirmList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="合同标识"
        label-width="120"
      >
        <el-input
          v-model="queryParams.identify"
          clearable
          placeholder="请输入合同标识"
          style="width: 200px"
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >搜索</el-button>
        <el-button
          icon="el-icon-refresh"
          size="mini"
          @click="resetQuery"
        >重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      style="width: 100%;"
      height="500"
    >
      <el-table-column
        label="合同模版名称"
        prop="templateName"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <!-- <el-table-column
        label="签署区"
        width="300"
      >
        <template #default="scope">
          {{getSignFields(scope.row.detail)}}
        </template>
      </el-table-column> -->
      <el-table-column
        label="适用群体"
        prop="applyBusiness"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column
        label="适用业务"
        prop="applyGroup"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column
        label="适用厂商"
        prop="applyFirm"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column
        label="标识"
        prop="identify"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column
        label="状态"
        prop="contracttemState"
      >
        <template #default="{row}">
          <el-tag :type="row.contracttemState == '0' ? 'success' : 'info'">{{row.contracttemState == '0' ? '已完成' : '未完成'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="备注"
        prop="remark"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-check"
            v-if="scope.row.contracttemState == '0'"
            @click="handleOption(scope.row)"
          >选择
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </el-dialog>
</template>

<script>
import { contractList } from '@/api/processManage/approveForms'
export default {
  props: ['contractID'],
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        templateName: '',
        applyBusiness: '',
        applyGroup: '',
        applyFirm: '',
        identify: ''
      },
      total: 0,
      loading: false,
      applyBusinessList: [
        {
          label: '全部',
          value: '全部'
        },
        {
          label: '自然人',
          value: '自然人'
        },
        {
          label: '法人',
          value: '法人'
        }
      ],
      applyGroupList: [
        {
          label: '全部',
          value: '全部'
        },
        {
          label: '直租',
          value: '直租'
        },
        {
          label: '回租',
          value: '回租'
        }
      ],
      applyFirmList: [
        {
          label: '全部',
          value: '全部'
        },
        {
          label: '工起',
          value: '工起'
        },
        {
          label: '小挖',
          value: '小挖'
        }
      ],
    };
  },
  methods: {
    async sync() {
      this.dialogVisible = true;
      this.resetQuery()
    },
    // 列表
    getList() {
      this.loading = true
      contractList(this.queryParams).then(response => {
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false
      })
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleOption(row) {
      if (this.contractID.includes(row.templateId)) {
        this.$message.error('当前合同模板已存在，请勿重复选择');
        return
      }
      this.$emit('ok', row)
      this.handleClose();
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.queryParams = {
        custName: '',
        pageNum: 1,
        pageSize: 10
      };
      this.getList();
    }
  }
};
</script>
<style lang="scss" scoped>
</style>